Guidance: how to render UI image goldens (engine per surface) - #179
Merged
Conversation
Extracted from a spec-driven-product session where the pack's §7 ("embed
regenerated renders") gave the *what* but no *how* — the golden-image rendering
method had to be reverse-engineered. Route the method into its owner and point
the pack at it.
- writing-tests: two bullets on rendering a UI image golden — match the engine to
the surface (a bit-exact rasterizer like satori+resvg for inline-styled/SVG or
flexbox-only surfaces with bundled fonts; a headless browser, small tolerance,
for pages using grid/vars/@media/emoji/form-widgets, self-skipping where absent),
and capturing a host-page-injected surface with computed styles flattened inline.
- spec-driven-product §7: point at that method (the pack owns the *what*, the
writing-tests skill owns the *how*).
- git-github-advanced: a new rule — phantom conformance findings on history you
didn't author (squash-merge-history, a pre-existing suppression) mean a stale
diff base in a cloud sandbox; fetch origin/<default> and re-run, never rewrite
merged history or edit pre-existing code to clear them.
Corpus self-checks green (75/75); checks/run.mjs clean.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SnZWShMEa5fu5QkGbLhY1v
Refs #181 Per review: a finding that persists against a fresh base may be a genuine new rule or someone else's addition — 'never satisfy them' was wrong. Reframe to refresh-first, then fix whatever is real. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SnZWShMEa5fu5QkGbLhY1v
missingbulb
force-pushed
the
claude/ui-golden-testing-guidance
branch
from
July 8, 2026 16:53
a0cd038 to
89ca0c1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Extracted from a spec-driven-product session (missingbulb/CrosswordChat). The
spec-driven-productpack's §7 says "embed regenerated renders of the real states" but gives no method — the golden-image rendering technique had to be reverse-engineered from a sibling repo. Thewriting-testsskill has excellent golden discipline (drive through real code, fixed clock, re-baseline approval) but nothing on how to produce the image. This fills that gap and routes it to the owning doc.What
writing-tests— two bullets on rendering a UI image golden:var(),@media, emoji, or form widgets is beyond that rasterizer — screenshot it with a headless browser (small tolerance, since it isn't bit-exact), self-skipping where no browser is present. Never reshape the product to fit the rasterizer.spec-driven-product§7 — points at that method (the pack owns the what: approving the gallery is approving the product; the skill owns the how).git-github-advanced— a session process-lesson: phantom conformance findings on history you didn't author (asquash-merge-history, a pre-existingwarning-suppression) mean a stale diff base in a cloud sandbox —git fetch origin <default>and re-run; never rewrite merged history or edit pre-existing code to clear them.Tests
Corpus self-checks green (
node --test checks/test/*.test.mjs→ 75/75);checks/run.mjsclean.🤖 Generated with Claude Code
https://claude.ai/code/session_01SnZWShMEa5fu5QkGbLhY1v
Generated by Claude Code